import React, { useImperativeHandle, forwardRef, Dispatch, SetStateAction } from 'react';
import { Modal, Form, Input, Select, Button } from 'antd';
import modal from './modal.less';
import Rules from './rules';

const { Option } = Select;

// type FormValues = {
//   businessType: string;
//   createTime: string;
//   createUser: string;
//   id: string;
//   password: string;
//   platformChannel: string;
//   regDomain: string;
//   status: string;
//   token: string;
//   username: string;
// }

type Prop = {
  modalFlag: boolean;
  type: string;
  width: number | string;
  errorMessage?: string;
  delTitle?: string;
  delText?: string;
  startTitle?: string;
  startText?: string;
  stopTitle?: string;
  stopText?: string;
  endTitle?: string;
  endText?: string;
  // propFormValue?: FormValues;
  setModalFlag: Dispatch<SetStateAction<boolean>>;
  handleFinish?: () => void;
  handleOk?: () => void;
  onFinish?: (values: any) => void;
  sureClick?: () => void;
}

const ModalComp = ({
  modalFlag = false,
  setModalFlag,
  type = '',
  width = 520,
  errorMessage = '',
  delTitle = '',
  delText = '',
  startTitle = '',
  startText = '',
  stopTitle = '',
  stopText = '',
  endTitle = '',
  endText = '',
  // propFormValue,
  onFinish,
  handleFinish,
  handleOk,
  sureClick
}: Prop, ref: any) => {
  console.log(modalFlag, type, '弹窗组件传值');
  const [form] = Form.useForm();

  // 处理ref转发
  useImperativeHandle(ref, () => ({
    getForm: () => {
      return form;
    }
  }));

  const handleCancel = () => {
    form.resetFields();
    setModalFlag(false);
  };
  // console.log(type === 'addAccount', propFormValue, type === 'addAccount' ? {} : { ...propFormValue })
  if (type === 'addAccount' || type === 'update') {
    return (
      <Modal title="" visible={modalFlag} width={width} onCancel={handleCancel} closeIcon={
        <i className={modal.closeIcon} />
      } footer={null}>
        {/* 添加账号窗 */}
        <div style={type === 'addAccount' || type === 'update' ? { display: 'block' } : { display: 'none' }}>
          <div className={`${modal.font} ${modal.title}`}>{type === 'addAccount' ? '添加账号' : '编辑账号'}</div>
          <Form form={form} labelCol={{ span: 6 }} className={modal.form} onFinish={onFinish}>
            <Form.Item name='platformChannel' label='选择平台' rules={Rules.platformChannel} className={modal.formItem}>
              <Select allowClear placeholder="请选择平台" className={modal.formItemContent}>
                <Option value="baidu">百度</Option>
                <Option value="360">360</Option>
                <Option value="sougou">搜狗</Option>
              </Select>
            </Form.Item>
            <Form.Item name='username' label='账户名' rules={Rules.username} className={modal.formItem}>
              <Input placeholder='请输入账户名' maxLength={20} disabled={type === 'update' ? true : false} allowClear className={modal.formItemContent} />
            </Form.Item>
            <Form.Item name='password' label='密码' rules={Rules.password} className={modal.formItem}>
              <Input type="password" placeholder='请输入密码' maxLength={20} allowClear className={modal.formItemContent} />
            </Form.Item>
            <Form.Item name='token' label='Token' rules={Rules.token} className={modal.formItem}>
              <Input placeholder='请输入Token' allowClear className={modal.formItemContent} />
            </Form.Item>
            <div className={modal.addFooter}>
              <Button className={`${modal.cancelBtn} ${modal.btn}`} onClick={handleCancel}>取消</Button>
              <Button className={`${modal.submitBtn} ${modal.btn}`} htmlType="submit" type='primary'>保存</Button>
            </div>
          </Form>
        </div>
      </Modal>
    );
  } else {
    return (
      <Modal title="" visible={modalFlag} width={width} onCancel={handleCancel} closeIcon={
        <i className={modal.closeIcon} />
      } footer={null}>
        {/* 导出窗 */}
        <div style={type === 'export' ? { display: 'block' } : { display: 'none' }} className={modal.font}>确定导出当前数据吗？</div>
        {/* 授权窗 */}
        <div style={type === 'empower' ? { display: 'block' } : { display: 'none' }}>
          <div className={modal.font}>确认进行授权吗？</div>
          <div className={modal.fontTips}>平台授权后，可进行推广操作</div>
        </div>
        {/* 取消授权窗 */}
        <div style={type === 'unEmpower' ? { display: 'block' } : { display: 'none' }}>
          <div className={modal.font}>确认要取消授权吗？</div>
          <div className={modal.fontTips}>取消授权后，该平台当前推广计划保持不变，无法再进行推广操作</div>
        </div>
        {/* 启用窗，删除窗，停用窗 */}
        <div style={type === 'start' || type === 'del' ? { display: 'block' } : { display: 'none' }}>
          <div className={modal.font}>{type === 'start' ? startTitle : type === 'del' ? delTitle : stopTitle}</div>
          <div className={modal.fontTips}>{type === 'start' ? startText : type === 'del' ? delText : stopText}</div>
        </div>
        {/* 接口结束提示窗 */}
        <div style={type === 'interfaceEnd' ? { display: 'block' } : { display: 'none' }}>
          <div className={modal.font}>{endTitle}</div>
          <div className={modal.fontTips}>{endText}</div>
        </div>
        {/* 推广失败窗 */}
        <div style={type === 'fail' ? { display: 'block' } : { display: 'none' }}>
          <div className={modal.font}>推广失败</div>
          <div className={modal.fontTips}>{errorMessage}</div>
        </div>
        <div className={modal.footer}>
          {
            type === 'fail' || type === 'interfaceEnd' ? <Button className={modal.sureBtn} type='primary' onClick={sureClick}>知道了</Button> : <>
              <Button className={`${modal.cancelBtn} ${modal.btn}`} onClick={handleCancel}>取消</Button>
              <Button className={`${modal.submitBtn} ${modal.btn}`} type='primary' onClick={handleOk}>确定</Button>
            </>
          }
        </div>
      </Modal>
    );
  }
}


export default forwardRef(ModalComp);